<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" th:href="@{css/font.css}">
    <link rel="stylesheet" th:href="@{css/xadmin.css}">
    <script th:src="@{lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        指示空速：
                        <input type="number" id="fuck">
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" onclick="select()"  id="search_button"><i class="layui-icon"></i>查询</button>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body ">
                    <table class="layui-table layui-form">
                        <thead>
                        <tr>
                            <th><input type="checkbox" name=""  lay-skin="primary"></th>
                            <th>ID</th>
                            <th>sphere_id</th>
                            <th>指示空速</th>
                            <th>扭矩</th>
                            <th>旋翼转速</th>
                            <th>燃油重量</th>
                            <th>气压高度</th>
                            <th>大气静温</th>
                            <th>描述</th>
                            <th>声学球显示</th>
                        </thead>
                        <tbody id="datashow">
                        <tr th:each="flystatusinfo:${flyStatusInfo}">
                            <td>
                                <input type="checkbox" name=""  lay-skin="primary">
                            </td>
                            <td th:text="${flystatusinfo.id}">1</td>
                            <td th:text="${flystatusinfo.sphere_id}">admin/user/userlist</td>
                            <td th:text="${flystatusinfo.indicated_airspeed}">会员相关</td>
                            <td th:text="${flystatusinfo.torque}">会员列表</td>
                            <td th:text="${flystatusinfo.rotor_speed}">会员相关</td>
                            <td th:text="${flystatusinfo.fuel_weight}">会员相关</td>
                            <td th:text="${flystatusinfo.barometric_height}">会员相关</td>
                            <td th:text="${flystatusinfo.static_temperature}">会员相关</td>
                            <td th:text="${flystatusinfo.describe}">会员相关</td>
                            <td class="td-manage">
                                <button class="layui-btn" onclick="display3Dball(this);">声学球显示</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body ">
                    <div class="page">
                        <div>
                            <a class="prev" href="">&lt;&lt;</a>
                            <a class="num" href="">1</a>
                            <span class="current">2</span>
                            <a class="num" href="">3</a>
                            <a class="num" href="">489</a>
                            <a class="next" href="">&gt;&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
    });
    /*用户-停用*/
    function member_stop(obj,id){
        layer.confirm('确认要停用吗？',function(index){

            if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

            }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
            }

        });
    }

    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }



    function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
<script>var _hmt = _hmt || []; (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>

<!--</div>-->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

<!--    导入插值算法-->
<script type="text/javascript" th:src="@{js/kriging.js}"></script>

<script>


    layui.use('form', function () {
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
    });



    function select(){

        var tt = document.getElementById('fuck').value;
        alert(tt);
        // $.ajax({
        //     //请求方式
        //     type: 'GET',
        //     data:{"indicatedAirspeed":tt},
        //     //路径
        //     url: 'http://localhost:8080/member-listinfo',
        //     //传递的参数
        //     success: function (data_train) {
        //         alert("ok");
        //     }
        // });
        window.open("www.baidu.com");

    }
    /*构造声学球*/
    function constructBall() {

        /*         var index = layer.load(1, {
                     shade: [0.1, '#fff'],//0.1透明度的白色背景
                     time: 1000,

                 });*/

        $.ajax({
            //请求方式
            type: 'GET',
            //路径
            url: '/constructBall',
            //传递的参数

            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            //返回的数据类型
            dataType: "json",

            success: function (data_train) {
                // console.log(data_train);
                var msg = data = data_train.msg
                alert(msg)
                if (msg=="success") {
                    function generateTestData(n) {
                        var x = [];
                        var y = [];
                        var t = [];

                        // create a fake dataset where t is 100 when lat is east
                        for (var i = 0; i < n; i++) {
                            x[i] = (-180) + Math.random() * 360;
                            y[i] = Math.random() * 180;
                            t[i] = Math.random() * 100;
                        }
                        return [t, x, y];
                    }

                    var data_t = generateTestData(500);

                    console.log(data_t);

                    var variogram = kriging.train(data_t[0], data_t[1], data_t[2], "exponential", 4, 50);

                    alert("ok");
                    var data = [];

                    for (var v = 0; v <= Math.PI; v = v + (Math.PI / 40)) {
                        for (var u = -Math.PI; u <= Math.PI; u += (Math.PI / 40)) {
                            x = Math.sin(v) * Math.sin(u);
                            y = Math.sin(v) * Math.cos(u);
                            z = Math.cos(v);
                            data.push([x, y, z, u, v, kriging.predict(u, v, variogram)]);
                        }

                    }
                    console.log(data);
                } else {
                    alert(msg);
                }
            }

        });


    }

    /*图标显示*/


    var chartDom = document.getElementById('main1');

    var myChart1 = echarts.init(chartDom);
    var option;

    //数据
    var base = +new Date(1968, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var date = [];

    var data = [Math.random() * 300];

    for (var i = 1; i < 20000; i++) {
        var now = new Date(base += oneDay);
        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
    }
    option = {
        animationDuration: 10000,
        tooltip: {
            order: 'valueDesc',
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10
        }],
        series: []
    };


    option && myChart1.setOption(option);
    // 基于准备好的dom，初始化echarts实例


    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('main2');

    var myChart2 = echarts.init(chartDom);

    // 指定图表的配置项和数据
    option = {
        animationDuration: 10000,
        tooltip: {
            order: 'valueDesc',
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            text: '噪声数据图',
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10
        }],
        legend: {
            data: ['模拟数据']
        },
        series: [
            {
                name: '模拟数据',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                },
                data: data
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    option && myChart2.setOption(option);


    function getOrginData() {
        //ajax请求
        $.ajax({
            //请求方式
            type: 'GET',
            //路径
            url: '/originDataDisPlay',
            //传递的参数

            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            //返回的数据类型
            dataType: "json",


            success: function (data) {
                var num_spl = data.numVocal;
                var seriesList = [];
                var legendList = [];
                //  alert(num_spl);
                console.log(data.Vocal_tract);
                var dataarr = data.Vocal_tract;
                for (var i = 0; i < num_spl; i++) {
                    legendList.push('声道' + i)
                    seriesList.push({
                        name: '声道' + i,
                        type: 'line',
                        symbol: 'none',
                        sampling: 'lttb',
                        itemStyle: {
                            color: 'rgb(' + Math.random() * 255 + ', ' + Math.random() * 255 + ', ' + Math.random() * 255 + ')'
                        },
                        animationDuration: 1000,
                        tooltip: {
                            order: 'valueDesc',
                            trigger: 'axis',
                            position: function (pt) {
                                return [pt[0], '10%'];
                            }
                        },
                        endLabel: {
                            show: true,
                            formatter: function (params) {
                                return params.value[3] + ': ' + params.value[0];
                            }
                        },
                        labelLayout: {
                            moveOverlap: 'shiftY'
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        areaStyle: {},
                        /*          areaStyle: {
                                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                          offset: 0,
                                          color: 'rgb('+Math.random()*255+', '+Math.random()*255+', '+Math.random()*255+')'
                                      }, {
                                          offset: 1,
                                          color: 'rgb('+Math.random()*255+', '+Math.random()*255+', '+Math.random()*255+')'
                                      }])
                                  },*/
                        data: dataarr[i]
                    });

                }

                myChart1.setOption({
                    xAxis: {
                        data: data.time
                    },
                    legend: {
                        data: legendList
                    },
                    series: seriesList
                });
            },
            error: function (data) {
                alert(data.msg);
            }
        });
    }

    //三维声学球显示
    function display3Dball() {

        //弹出选择框输入信息
        layer.open({
            type: 2,
            area: ['940px', '500px'],

            anim: 3,
            shade: 0,
            shadeClose: false,
            title: "声学球显示",
            offset: 'rb',
            id: 'display3Dball',//设定一个id，防止重复弹出
            resize: false,
            skin: 'layui-layer-molv',// layui-layer-lan	layui-layer-rim
            shadeClose: true, //点击遮罩关闭
            scrollbar: false,
            content: 'member-3DNoise',
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);
                $(".layui-layer").css("background-color: transparent !important;");
            }

        });
    }

    //二维声学球显示
    function display2Dball() {

        //弹出选择框输入信息
        layer.open({
            type: 2,
            area: ['600px', '320px'],

            anim: 3,
            shade: 0,
            shadeClose: false,

            resize: false,
            title: "声学球显示",
            offset: 'rb',
            id: 'display2Dball',//设定一个id，防止重复弹出
            skin: 'layui-layer-molv',// layui-layer-lan	layui-layer-rim
            shadeClose: true, //点击遮罩关闭
            content: 'member-2DNoise.html',
            scrollbar: false,
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);

                //获取新窗口对象
                var iframeWindow = layero.find('iframe')[0].contentWindow;
                //重新渲染
                iframeWindow.layui.form.render();
            }

        });
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        //弹出选择框输入信息
        layer.open({
            type: 2,
            area: ['550px', '230px'],
            shadeClose: true, //点击遮罩关闭
            content: 'member-timeprop.html',
            success: function (layero, index) {
                var body = layui.layer.getChildFrame('body', index);

                setTimeflag(obj);
            }

        });
        /*layer.confirm('确认要停用吗？', function (index) {*/

    }

    function setTimeflag(obj) {
        if ($(obj).attr('title') == '时间同步') {

            //发异步把用户状态进行更改
            $(obj).attr('title', '时间同步完毕')
            $(obj).find('i').html('&#xe62f;');

            $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已同步');
            $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').css("background", "green");
            //layer.msg('已停用!', {icon: 5, time: 1000});

        }
    }


    function delAll(argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要恢复吗？' + data, function (index) {
            //捉到所有被选中的，发异步进行删除
            layer.msg('恢复成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
    // /*查询按钮的监听*/
    // // $("#search_button").click((e)=>{window.alert("hello");});
    // document.getElementById("search_button").onclick=function(){
    //     window.alert("sfs");
    // }
    function createRowData(info){
        // <tr th:each="flystatusinfo: ${flyStatusInfo}">
        //     <td>
        //         <input type="checkbox" name="" lay-skin="primary">
        //     </td>
        //     <td th:text="${flystatusinfo.id}">1</td>
        //     <td th:text="${flystatusinfo.sphere_id}">admin/user/userlist</td>
        //     <td th:text="${flystatusinfo.indicated_airspeed}">会员相关</td>
        //     <td th:text="${flystatusinfo.torque}">会员列表</td>
        //     <td th:text="${flystatusinfo.rotor_speed}">会员相关</td>
        //     <td th:text="${flystatusinfo.fuel_weight}">会员相关</td>
        //     <td th:text="${flystatusinfo.barometric_height}">会员相关</td>
        //     <td th:text="${flystatusinfo.static_temperature}">会员相关</td>
        //     <td th:text="${flystatusinfo.describe}">会员相关</td>
        //     <td className="td-manage">
        //         <button className="layui-btn" onClick="display3Dball(this);">声学球显示</button>
        //     </td>
        // </tr>
        let tr=$("<TR></TR>");
        for(let i=0; i<11; i++)
            tr.append($("<TD></TD>"));
        //checkbox
        let input=$("<INPUT></INPUT>");
        input.setAttribute("type", "checkbox");
        tr.first().append(input);
        //声学球按钮
        let b=$("<button></button>");
        b.setAttribute("className", "layui-btn");
        b.setAttribute("onClick", "display3Dball(this)");
        b.innerText="声学球显示";
        tr.last().append(b);
        return tr;
    }
    function search_click(){
        // $.ajax({
        //     //请求方式
        //     type: 'GET',
        //     //路径
        //     url: '/testmethod',
        //     //传递的参数
        //
        //     xhrFields: {
        //         withCredentials: true
        //     },
        //     crossDomain: true,
        //     //返回的数据类型
        //     dataType: "json",
        //     success: function (data) {
        //         console.log(data);
        //         $("#datashow").append(createRowData("1"));
        //         console.log(data);
        //     }
        // })
        window.open("www.baidu.com", "_self");
    }
</script>

</html>